<template>
	<view class="content">
		<view style="position: relative;">
			<image class="bg" :src="$store.state.images.xmb_1" mode="widthFix"></image>
			<view class="wearers" :style="{justifyContent:wearers.length>2?'start':'center'}">
				<view class="add-user" @click="addWearer">
					<image class="ic-add-user" src="../../static/ic_add_user.png" mode="widthFix"></image>
					<text class="add-user-text">添加佩戴者</text>
				</view>
				<view class="add-user" @click="selectWearer(index)" v-for="(wear, index) in wearers" :key="index">
					<view class="wear-avatar" :class="{'active':selectedWearerIndex==index}">
						<!-- <text class="wear-avatar-text">
							{{ wear.WearerName.substr(0, 1) }}
						</text> -->
						<image class="wear-icon" :class="{'active':selectedWearerIndex==index}" :src="wear.Icon"></image>
						<text class="wear-relate">
							{{ wear.WeareaRelate }}
						</text>
					</view>
					<text class="add-user-text" :class="{'active':selectedWearerIndex==index}">{{ wear.WearerName }}</text>
				</view>
			</view>
			<view class="the-rule" @click="openRule">
				<text>活动规则</text>
			</view>
		</view>
		<navBar class="nav-bar" title="星梦保"></navBar>
		
		<view class="bg2-container">
			<image class="bg2" :src="$store.state.images.xmb_2" mode="widthFix"></image>
			<view class="button" @click="openActive">
				<text>立即激活</text>
			</view>
			<view class="button history" @click="openStarHistory">
				<text style="font-size: 25rpx;">星梦保档案</text>
			</view>
		</view>
		
		<uni-popup ref="popupStarHistory" type="center" :isMaskClick="false">
			<view class="pop-content">
				<view class="content-card">
					<image class="close" src="../../static/ic_close.png" mode="widthFix" @click="closeStarHistory"></image>
					<view class="pop-title">
						<text>星梦保历史记录</text>
					</view>
					<scroll-view class="star-history"
						:scroll-y="true"
					    :scroll-with-animation="true">
						<view class="star-history-item" v-for="(item,index) in starHistory" :key="index"
							@click="showHistoryDetail(item)"
						>
							<view class="item-row">
								<view class="item-label">门店</view>
								<view class="item-value">{{item.ShopName}}</view>
							</view>
							<view class="item-row">
								<view class="item-label">提交时间</view>
								<view class="item-value">{{item.VerifyDate}}</view>
							</view>
							<view class="item-row">
								<view class="item-label">状态</view>
								<view class="item-value">{{item.VerifyStatus}}</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="popupRule" type="center" :isMaskClick="false">
			<view class="pop-content">
				<view class="content-card">
					<image class="close" src="../../static/ic_close.png" mode="widthFix" @click="closeRule"></image>
					<view class="pop-title">
						<text>免费换新片活动规则</text>
					</view>

					<view class="rich-text" v-html="htmlSnip"></view>
					
					<view class="iknown" @click="closeRule">
						<text>我知道了</text>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="popupActive" type="center" :isMaskClick="false">
			<view class="pop-content">
				<view class="content-card">
					<image class="close" src="../../static/ic_close.png" mode="widthFix" @click="closeActive"></image>
					<view class="pop-title">
						<text>免费换新片活动规则</text>
					</view>
		
					<scroll-view class="rich-text"
						:scroll-y="true"
						:scroll-top="activeScrollTop"
					    :scroll-with-animation="true">
						<!-- <view class="rich-text" >
							
						</view> -->
						<view v-html="htmlSnip"></view>
						<view style="margin-top: 30rpx; font-size: 23rpx;">
							<checkbox-group @change="agreeChange" style="display: inline-block;">
								<checkbox value="agree" :checked="checked" >
								</checkbox>
							</checkbox-group>
							<text>
								为了确认活动资格以及方便我们跟踪及评估您的孩子佩戴浪特梦星梦圆系列产品的效果，我们会收集并记录您孩子的姓名、年龄、验配时间及相关验光数据。
							</text>
							<view class="link" @click="goProtectRule">
								<text>星梦圆儿童个人信息保护规则及监护人须知</text>
							</view>
							<view>
								<text>如您拒绝提供上述信息，您的孩子将无法参与我们的上述活动或享受相关权益。</text>
							</view>
						</view>
					</scroll-view>
					
					<view class="iknown" @click="nextAddDoc">
						<text>我知道了</text>
					</view>
					<view class="agree" @click="agreeActive()">
						<text>下滑阅读并勾选协议</text>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="popupAddWearer" type="center" :isMaskClick="false">
			<addWearer
				@onCancel="onCancelAddWearer"
				@onConfirm="onConfirmAddWearer"
			></addWearer>
		</uni-popup>
		<uni-popup ref="popupAddDoc" type="center" :isMaskClick="false">
			<addDoc
				star
				@onCancel="onCancelAddDoc"
				@onConfirm="onConfirmAddDoc"
			></addDoc>
		</uni-popup>
		<uni-popup ref="popupReviewDoc" type="center" :isMaskClick="false">
			<addDoc
				star_review
				@onCancel="onCancelReviewDoc"
			></addDoc>
		</uni-popup>
	</view>
</template>

<script>
	import navBar from '../../widgets/nav_bar.vue'
	import addWearer from '../../widgets/add_wearer.vue';
	import addDoc from '../../widgets/add_doc.vue';
	import { mapState } from 'vuex'
	export default {
		components: {
			navBar,
			addWearer,
			addDoc,
		},
		data() {
			return {
				activeScrollTop: 0,
				checked: false,
			}
		},
		onLoad(options) {
			console.log('xmb onLoad', options);
			// const ltmyj = this.$store.state.fonts.ltmyj
			// uni.loadFontFace({
			//   family: 'yshst',
			//   source: `url("${ltmyj}")`,
			//   success(res) {
			//       console.log(res.status)
			//   },
			//   fail(res) {
			// 	  console.error('yshst font load fail')
			//   }
			// })
			this.$store.dispatch("getChangeLensesRule");
			this.$store.dispatch("getReadWearerInfor");
			this.$store.dispatch("getAllShop");
			this.$store.dispatch('ReadChildInforProtectRule');

			if (options.action == 'active') {
				this.openActive();
			}
		},
		computed: {
			...mapState(["wearers", "selectedWearerIndex", "starHistory"]),
			htmlSnip() {
				console.log("a=", this.$store.state.activityContent);
				// return this.$store.state.activityContent;
				const bodyContentMatch = this.$store.state.activityContent.match(/<body[^>]*>([\s\S]*?)<\/body>/i)
				if (bodyContentMatch && bodyContentMatch[1]) {
					return bodyContentMatch[1];
				} else {
					return '';
				}
				// return `<DIV>sdsds</DIV>`;
			}
		},
		watch: {
			starHistory(newVal) {
				if (newVal) {
					uni.hideLoading();
					this.$refs.popupStarHistory.open();
				} else {
					this.$refs.popupStarHistory.close();
				}
			},
		},
		methods: {
			openRule() {
				this.$refs.popupRule.open();
			},
			closeRule() {
				this.$refs.popupRule.close();
			},
			openActive() {
				if (this.selectedWearerIndex < 0) {
					uni.showToast({
						title: '请选择佩戴者',
						icon: 'none',
					})
					return;
				}
				this.activeScrollTop = 0;
				this.$refs.popupActive.open();
			},
			closeActive() {
				this.$refs.popupActive.close();
			},
			nextAddDoc() {
				console.log('checked', this.checked);
				if (!this.checked) {
					uni.showToast({
						title: '请勾选协议',
						icon: 'none',
					})
					return;
				}
				this.$refs.popupActive.close();
				this.$refs.popupAddDoc.open();
			},
			agreeActive() {
				this.checked = true;
				// this.activeScrollTop = 0;
				this.$nextTick(() => {
					this.activeScrollTop = 10000;
				})
			},
			agreeChange(e) {
				const values = e.detail.value;
				this.checked = values.includes('agree');
			},
			addWearer() {
				this.$refs.popupAddWearer.open();
			},
			selectWearer(index) {
				this.$store.commit('selectWearer', index);
			},
			onCancelAddWearer() {
				console.log("onCancelAddWearer")
				this.$refs.popupAddWearer.close();
			},
			onConfirmAddWearer(form) {
				console.log("onConfirmAddWearer", form)
				this.$refs.popupAddWearer.close();
				this.$store.dispatch("addEstablishWearerInfor", form);
			},
			onCancelAddDoc() {
				console.log("onCancelAddDoc")
				this.$refs.popupAddDoc.close();
			},
			onConfirmAddDoc(form) {
				console.log("onConfirmAddDoc", form)
				this.$refs.popupAddDoc.close();
				this.$store.dispatch("StarDreambActivate", form);
			},
			openStarHistory() {
				// if (this.selectedWearerIndex < 0) {
				// 	uni.showToast({
				// 		title: '请选择佩戴者',
				// 		icon: 'none',
				// 	})
				// 	return;
				// }
				// uni.showLoading({
				// 	title: "加载中",
				// })
				// this.$store.dispatch("ReadStarDreambInfor");
				uni.navigateTo({
					url: '/pages/home/xmbDoc'
				})
			},
			closeStarHistory() {
				this.$refs.popupStarHistory.close();
				this.$store.commit('setStarHistory', null);
			},
			showHistoryDetail(item) {
				this.$store.commit('setDocEditItem', {...item})
				this.$refs.popupReviewDoc.open();
			},
			onCancelReviewDoc() {
				this.$store.commit('setDocEditItem', null);
				this.$refs.popupReviewDoc.close();
			},
			goProtectRule() {
				uni.navigateTo({
					url:'/pages/home/protectRule'
				})
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		height: 100vh;
		box-sizing: border-box;
		font-family: "yshst" !important;
	}
	.nav-bar {
		position: absolute;
		top: 0;
		left: 0;
	}
	.bg {
		width: 100vw;
	}
	.wearers {
		position: absolute;
		bottom: 0;
		left: 10rpx;
		right: 10rpx;
		margin: 0 auto 160rpx auto;
		display: flex;
		flex-direction: row;
		overflow-x: scroll;
		justify-content: center;
	}
	.add-user {
		width: 200rpx;
		min-width: 200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.ic-add-user {
		width: 110rpx;
		height: 110rpx;
	}
	.wear-avatar {
		width: 110rpx;
		height: 110rpx;
		background-color: #9fdaff;
		border-radius: 55rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	.wear-avatar.active {
		width: 130rpx;
		height: 130rpx;
		border-radius: 70rpx;
	}
	.wear-icon {
        width: 110rpx;
		height: 110rpx;
    }
	.wear-icon.active {
		width: 130rpx;
		height: 130rpx;
	}
	.wear-avatar-text {
		font-size: 50rpx;
		font-weight: bold;
		color: white;
	}
	.wear-relate {
		padding: 5rpx 10rpx;
		background-color: rgb(16, 18, 17);
		color: white;
		position: absolute;
		bottom: -10rpx;
		font-size: 20rpx;
		border-radius: 100rpx;
		left: auto;
		right: auto;
	}
	.add-user-text {
		margin-top: 10rpx;
	}
	.add-user-text.active {
		font-weight: bold;
		font-size: 40rpx;
		color: #50c0f9;
	}
	.the-rule {
		position: absolute;
		bottom: 0;
		right: 0;
		margin: 0 35rpx 100rpx 0;
		text-decoration: underline;
		padding: 10rpx 0;
	}
	.bg2-container {
		width: 100vw;
		padding: 30rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		background-color: #e5f2f9;
	}
	.bg2 {
		/* align-self: stretch; */
		/* width: 100vw; */
		width: calc(100% - 50rpx);
		border-radius: 30rpx;
		/* padding: 0 30rpx; */
		/* box-sizing: border-box; */
		/* margin: 0 30rpx; */
	}
	.bg2-container .button {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 80rpx;
		height: 70rpx;
		width: 260rpx;
		background-color: #50c0f9;
		border-radius: 100rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
	}
	.bg2-container .button.history {
		background-color: transparent;
		left: auto;
		right: 15rpx;
		bottom: 40rpx;
		text-decoration: underline;
		text-underline-offset: 5rpx;
	}
	.pop-content {
		/* background-color: white; */
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		align-items: center;
		justify-content: center;
	}
	.pop-content .content-card {
		background-color: white;
		border-radius: 20rpx;
		width: calc(100vw - 40rpx);
		margin: 160rpx 25rpx;
		position: relative;
		/* flex: 1; */
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.content-card .pop-title {
		height: 70rpx;
		background-color: #50c0f9;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 35rpx;
	}
	.content-card .close {
		width: 20rpx;
		padding: 10rpx;
		position: absolute;
		top: 20rpx;
		right: 20rpx;
	}
	.content-card .rich-text {
		padding: 20rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
		flex: 1;
		overflow: scroll;
	}
	.content-card .star-history {
		padding: 20rpx;
		box-sizing: border-box;
		flex: 1;
		overflow: scroll;
	}
	.content-card .iknown {
		height: 60rpx;
		width: 300rpx;
		background-color: #50c0f9;
		border-radius: 100rpx;
		font-size: 30rpx;
		display: flex;
		/* color: white; */
		align-items: center;
		justify-content: center;
		align-self: center;
		margin: 30rpx 0;
	}
	.content-card .agree {
		height: 60rpx;
		width: 300rpx;
		background-color: #d5d5d5;
		border-radius: 100rpx;
		font-size: 30rpx;
		display: flex;
		/* color: white; */
		align-items: center;
		justify-content: center;
		align-self: center;
		margin: 0 0 30rpx 0;
	}
	.content-card .link {
		color: blue;
		text-decoration: underline;
		padding: 10rpx 0;
	}
	.star-history-item {
		height: 200rpx;
		background-color: whitesmoke;
		border-radius: 10rpx;
		padding-top: 10rpx;
	}
	.star-history-item + .star-history-item {
		margin-top: 20rpx;
	}
	.star-history-item .item-row {
		height: 60rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 20rpx;
	}
	.item-row .item-label {
		color: #999;
		width: 170rpx;
	}
</style>